import {useState} from "react";
import {useDispatch} from "react-redux";

import './index.scss'

const Item = (props) => {

    const [mouse, setMouse] = useState(false)
    const dispatch = useDispatch()

    const handleCheck = (id) => {
        return (event) => {
            dispatch(props.updateTodo({'id': id, 'done': event.target.checked}))
        }
    }
    const handleDelete = (id) => {
        if (window.confirm('确定删除吗？')) {
            dispatch(props.deleteTodo(id))
        }
    }
    const {id, name, done} = props
    return (
        <li style={{
            backgroundColor: mouse ? '#ddd' : 'white'
        }
        } onMouseEnter={() => setMouse(true)} onMouseLeave={() => setMouse(false)}>
            <label>
                <input type='checkbox' checked={done} onChange={handleCheck(id)}/>
                <span>{name}</span>
            </label>
            <button onClick={() => handleDelete(id)} className='but btn-danger'
                    style={{display: mouse ? 'block' : 'none'}}>删除
            </button>
        </li>
    );
}
export default Item
